﻿<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="LeftMenu.ascx.cs" Inherits="RetailOnlineSite.UI.LeftMenu" %>
<style type="text/css">
    #vnav
    {
        margin-left: 0;
        float: left;
    }
    /* Parents */div#vnav ul
    {
        padding: 0;
        margin: 0;
    }
    div#vnav ul li
    {
        height: 35px;
        overflow: hidden;
        list-style: none;
        text-decoration: none;
        font-weight: bold;
        line-height: 1.2;
        -moz-border-radius: 5px;
        -webkit-border-radius: 5px;
        -moz-box-shadow: 0 1px 3px #999;
        -webkit-box-shadow: 0 1px 3px #999;
        text-shadow: 0 -1px 1px #222;
        right: 0;
        border-bottom: 2px solid #4d90fe;
        background-color: #4a72cc;
        cursor: default;
    }
    div#vnav ul li.hover
    {
        overflow: visible !important;
        padding-top: 1px;
    }
    div#vnav ul li h1
    {
        font-size: 10pt;
        padding: 0px 0px 0px 15px;
        color: #fff;
    }
    div#vnav ul li:hover h1
    {
        font-size: 10pt;
        color: #fff9ae;
    }
    div#vnav ul li dl.nav dt a.nav
    {
        cursor: pointer;
        background-color: #fff;
        padding: 10px 0px 5px 15px;
        font-size: 10pt;
        color: #4d90fe;
    }
    div#vnav ul li dl.nav dt:hover a.nav
    {
        color: #555;
    }
    /* Items */dl.nav
    {
        margin: 0;
        padding: 0;
        width: 170px; /* Width of Menu Items */
        border-bottom: 1px solid #4d90fe;
    }
    dl.nav dt
    {
        position: relative;
        list-style: none;
    }
    dl.nav dt div
    {
        position: absolute;
        left: 169px; /* Set 1px less than menu width */
        top: 0;
        display: none;
        width: 602px;
        z-index: 10;
        padding: 10px;
        filter: alpha(opacity=85);
        background-color: #111;
        opacity: 0.85;
        -moz-opacity: 0.85;
        -khtml-opacity: 0.85;
    }
    dl.nav dt div
    {
    }
    dl.nav dt div a
    {
        width: 150px;
        padding: 0;
        margin: 5px 0 0 0;
        text-decoration: none;
        float: left;
        color: #fff;
    }
    dl.nav dt div a:hover
    {
        color: #4d90fe;
    }
    /* Styles for Menu Items */dl.nav dt a.nav
    {
        display: block;
        text-decoration: none;
        color: #4d90fe;
        background: transparent; /* IE6 Bug */
        border-top: 0; /* IE6 Bug */
        border-bottom: 0.5px solid #4d90fe;
    }
    /* Holly Hack. IE Requirement \*/* html dl.nav dt
    {
        float: left;
        height: 1%;
    }
    * html dl.nav dt a
    {
        height: 1%;
    }
    /* End */dl.nav dt:hover div, dl.nav dt.over div
    {
        display: block;
    }
    /* The magic */</style>

<script type="text/javascript">

    var pageUrl = '<%=ResolveUrl("~/WebService.asmx/LoadCategory")%>'

    function LoadCategory() {
        $.ajax({
            type: "POST",
            url: pageUrl,
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            success: OnSuccess,
            failure: function(response) {
                alert(response.d);
            }
        });
    }
    function OnSuccess(response) {
        var categories = response.d;
        if (categories != null && categories.length > 0) {
            var html = "";
            for (k = 0; k < categories.length; k++) {
                html += "<li><h1>" + categories[k].Name + "</h1>" +
                                        "<dl class='nav'>";
                if (categories[k].SubCategoryCollection != null) {
                    for (i = 0; i < categories[k].SubCategoryCollection.length; i++) {
                        var subcategory = categories[k].SubCategoryCollection[i];
                        html += "<dt><a class='nav' href='#'>" + subcategory.Name + "</a><div>";
                        for (j = 0; j < subcategory.SubCategoryCollection.length; j++) {
                            var child = subcategory.SubCategoryCollection[j];
                            html += "<a href='#pagefavouriteproduct'>" + child.Name + "</a>";
                        }
                        html += "</div></dt>";
                    }
                }
                html += "</dl></li>";
            }

            $('div#vnav ul#mainnav').append(html);

            loadEvents();
        }
    }

    function loadEvents() {
        var active;

        //When Mouse rolls over li
        $("div#vnav ul li").mouseover(function() {
            if (active != null) {
                $(active).stop().animate({ height: '35px' }, { queue: false, duration: 400, easing: 'easeOutBounce' })
                active.className = "";
            }
            $(this).stop().animate({ height: '100%' }, { queue: false, duration: 400, easing: 'easeOutBounce' })
            this.className = "hover";

            active = this;
        });

        //When Mouse cursor removed from li
        $("div#vnav ul").mouseout(function() {
            //            $(this).stop().animate({ height: '35px' }, { queue: false, duration: 600, easing: 'easeOutBounce' })
            //            this.className = "";

            if (active != null) {
                $(active).stop().animate({ height: '35px' }, { queue: false, duration: 400, easing: 'easeOutBounce' })
                active.className = "";
            }
        });

        $("dl.nav").children().each(function() {
            node = $(this)
            node.mouseover = function() {
                this.className += " over";
            }
            node.mouseout = function() {
                this.className = this.className.replace(" over", "");
            }
        });

    }

    $(document).ready(function() {    // loaded page


        checkURL();    // check url and load page

        $('table tr td a').click(function(e) {    // execute

            checkURL(this.hash);    // ... check parameter on link ( ex. as #page1 )
        });

        setInterval("checkURL()", 250);    // test the change 250 ms

    });

    var lasturl = '';    //here we store the current URL hash

    function checkURL(hash) {
        if (!hash) hash = window.location.hash;    //if no parameter is provided, use the hash value from the current address

        if (hash != lasturl)    // if the hash value has changed
        {
            lasturl = hash;    //update the current hash
            var url = 'Register/' + hash.replace('#', '') + '.aspx';
            $('#pageContent').load(url);
            // loadPage(hash);    // and load the new page
        }
    }

    LoadCategory();
    
</script>

<div id="wrapper" />
<div id="vnav">
    <ul id="mainnav">
    </ul>
</div>
<div id="des" />
